import React from "react";
import { Link } from 'react-router-dom'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: [],
            tabIndex: -1
        }
    }
    componentDidMount() {
        this.$axios
            .get(
                "https://apipc-xiaotuxian-front.itheima.net/home/category/head"
            )
            .then(res => {
                // console.log(res);
                if (res.data.msg == '操作成功') {
                    this.$axios
                        .get("https://apipc-xiaotuxian-front.itheima.net/home/brand?limit=6")
                        .then((res1) => {
                            if (res1.data.msg == "操作成功") {
                                this.state.arr.push({ goods: res1.data.result, name: "品牌", children: [{ name: "品牌推荐" }] });
                            }
                        });

                    this.setState({
                        arr: res.data.result
                    });
                }

            });
    }
    overs(index) {
        this.setState({
            tabIndex: index
        })
    }
    outs() {
        this.setState({
            tabIndex: -1
        })
    }
    render() {
        return <div>
            <div className="banner">
                <div className="commonwidth">
                    <div className="cont">
                        <div className="nav_bar">
                            <ul className="menu">
                                {this.state.arr.map((i, index) => {
                                    return <li className={`bar ${this.state.tabIndex == index && 'active'}`} key={index} onMouseOver={this.overs.bind(this, index)}>
                                        <Link to="/#/">{i.name}</Link>
                                        {i.children.slice(0, 2).map((item, index) => {
                                            return <Link to="/#/" key={index}>{item.name}</Link>
                                        })}
                                        {this.state.tabIndex == index && <div className='laye' onMouseOut={this.outs.bind(this)}>
                                            <h4>分类推荐<small>根据您的购买或浏览记录推荐</small></h4>
                                            <ul>
                                                {i.goods.map((k, index) => {
                                                    return !i.logo ? <li className="fenlei" key={index}>
                                                        <a href="/#/">
                                                            <img src={k.picture} alt="" />
                                                            <div className="info">
                                                                <p>{k.name}</p>
                                                                <p>{k.desc}</p>
                                                                <p>￥{k.price}</p>
                                                            </div>
                                                        </a>
                                                    </li>
                                                        :
                                                        <li key={index}>
                                                            <a href="#!">
                                                                <img src={k.picture} alt="" />
                                                                <div className="info">
                                                                    <p>{k.place}</p>
                                                                    <p>{k.name}</p>
                                                                    <p>{k.desc}</p>
                                                                </div>
                                                            </a>
                                                        </li>
                                                })}
                                            </ul>
                                        </div>}
                                    </li>
                                })}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div >
    }
}